import c from './index.module.scss'
import useRouterStore from '@/stores/routerStore'
import { CSSProperties, defineComponent, ref } from "vue"
import router from '@/router/permission'
import { storeToRefs } from 'pinia'
import { adminConfig } from "@Tea/model"
import { ElImage, ElIcon, ElTooltip } from 'element-plus'
import { initTooltip } from '@Tea/utils'
import IconMap from '@/config/sideNavIconMap'

export default defineComponent({
  setup() {
    const store = useRouterStore()
    const { appRoute, activeParent } = storeToRefs(store)
    const showMenu = ref(true) // 是否展示菜单
    const menuStyle = ref<CSSProperties>({})
    const animationType = ref("") // 动画类型

    // 改变菜单呈现类型
    const changeMenuType = () => {
      showMenu.value = !showMenu.value
      animationType.value = showMenu.value ? 'open' : 'close'
      menuStyle.value = showMenu.value ? {} : {
        width: "40px",
        overflow: "hidden"
      }
    }

    // 渲染菜单展示项
    const renderMenuItem = (route: { title: string, code: string }) => {
      const VNode = <div class={`allCenter ${c.icon}`}>
        <ElIcon size="18">
          {IconMap[route.code]}
        </ElIcon>
      </div>
        
      return showMenu.value ? VNode : initTooltip(VNode,
        { content: route.title, placement: "right" })
    }
    
    return () => (
      <div class={c.sideNav}>
        <div class={`${c.left} m-window ${c[animationType.value]}`} style={menuStyle.value}>
          <ul>
            {
              appRoute.value.children.map((route, index) =>
              (<li
                class={`${route.code === activeParent.value.name ? 'qColor' : ''} cursorPointer ${c.navMenu}`}
                onClick={() => router.push({ name: route.code })}
                key={index}
              >{renderMenuItem(route)}
                <span>{route.title}</span>
              </li>)
              )
            }
          </ul>
          <div class={`${c.version}  ${c[showMenu.value ? "none" : "show"]} allCenter`}>版本：v {adminConfig.version}</div>
        </div>
        <div class="allCenter">
          <span class={c[showMenu.value ? 'rotateLeft' : 'rotateRight']} onClick={changeMenuType}>
            <ElImage
              class={`${c.tool} cursorPointer`}
              style="width: 14px; height: 28px"
              src="/src/assets/left.png"
              fit="fill" />
          </span>
        </div>
      </div>
    )
  }
})
